<!--
 * @Descripttion: 首页
 * @version: 1.0
 * @Author: 自由如风
 * @Date: 2021-04-25 14:38:20
 * @LastEditors: 自由如风
 * @LastEditTime: 2021-04-25 19:06:53
-->
<template>
  <div class="home">
    <Banner></Banner>
    <div class="main">
      <h2 class="w-title">{{ config.Home.main.w_title }}</h2>
      <p class="w-text">{{ config.Home.main.w_text }}</p>
      <div class="container">
        <div class="row">
          <div
            class="col-lg-4 clo-xs-12"
            v-for="(item, index) in config.Home.main.Flip3D"
            :key="index"
          >
            <Flip3D :data="item"></Flip3D>
          </div>
        </div>
      </div>
      <div class="container mt">
        <div class="row company">
          <div class="col-lg-7 col-xs-12 text">
            <p>{{ config.Home.main.company.p }}</p>
          </div>
          <div class="col-lg-5 clo-xs-12">
            <img :src="config.Home.main.company.src" />
          </div>
        </div>
      </div>
    </div>
    <div class="main1 mt">
      <h2 class="w-title">{{ config.Home.main1.w_title }}</h2>
      <p class="w-text">
        {{ config.Home.main1.w_text }}
      </p>
      <div class="container">
        <div class="row">
          <FanZhuan
            v-for="(item, index) in config.Home.main1.fabzhuan"
            :key="index"
            :data="item"
          ></FanZhuan>
        </div>
      </div>
    </div>
    <div class="main3 mt">
      <h2 class="w-title">{{ config.Home.main3.w_title }}</h2>
      <p class="w-text">{{ config.Home.main3.w_text }}</p>
      <div class="container case">
        <div class="row">
          <div
            class="col-lg-3 col-xs-12 casepic"
            v-for="index in 8"
            :key="index"
          >
            <div class="recent-work-wrap">
              <a href="">
                <img
                  class="img-responsive"
                  :src="config.Home.main3.casepic[index - 1].src"
                  alt=""
                />
                <div class="overlay">
                  <div class="recent-work-inner">
                    <p
                      style="
                        margin-top: 40%;
                        margin-bottom: 5%;
                        padding: 0;
                        font-size: 2rem;
                      "
                    >
                      {{ config.Home.main3.casepic[index - 1].p1 }}
                    </p>
                    <p>{{ config.Home.main3.casepic[index - 1].p2 }}</p>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <a href="case.html" class="more">查看更多</a>
    </div>
    <div class="main4 mt">
      <h2 class="w-title">{{ config.Home.main4.w_title }}</h2>
      <p class="w-text">{{ config.Home.main4.w_text }}</p>
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-xs-12" v-for="index in 3" :key="index">
            <a href="" class="line">
              <img :src="config.Home.main4.container[index - 1].src" />
              <div class="xin">
                <div class="time">
                  <span>{{
                    config.Home.main4.container[index - 1].time_span
                  }}</span>
                  <p>{{ config.Home.main4.container[index - 1].time_p }}</p>
                </div>
                <div class="text">
                  <h2>{{ config.Home.main4.container[index - 1].h2 }}</h2>
                  <p>
                    {{ config.Home.main4.container[index - 1].p }}
                  </p>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <a href="news.html" class="more">查看更多</a>
    </div>
    <div class="main5 mt">
      <div class="container">
        <div class="row">
          <div
            class="col-lg-6 col-xs-12 text"
            style="color: black; font-weight: bolder"
          >
            <!-- <p>友情链接:<a href="www.sina.com.cn" target="_blank"
 							style="color:black;font-weight: bolder;">新浪官网</a>/
 						<a href="www.wenming.cn" target="_blank" style="color:black;font-weight: bolder;">中国文明网</a>/
 						<a href="www.people.com.cn" target="_blank" style="color:black;font-weight: bolder;">人民日报</a>
					 </p> -->
            <p v-for="(item, index) in config.Home.main5.row" :key="index">
              {{ item.p
              }}<a
                :href="item.href"
                target="_blank"
                style="color: black; font-weight: bolder"
                >{{ item.a }}</a
              >
            </p>
          </div>
          <div class="col-lg-6 col-xs-12 photo">
            <p class="att" style="color: black; font-weight: bolder">
              {{ config.Home.main5.p }}
            </p>
            <img :src="config.Home.main5.src" style="width: 30%" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Banner from "@/components/Banner.vue";
import Flip3D from "@/components/Flip3D.vue";
import FanZhuan from "@/components/FanZhaun.vue";

@Options({
  components: { Banner, Flip3D, FanZhuan },
})
export default class Home extends Vue {}
</script>
